<template>
    <view class="container">
        <view class="search">
            <navigator url="/pages/search/search" class="input">
                <van-icon name="search" />
                <text class="txt">商品搜索, 共{{ goodsCount }}款好物</text>
            </navigator>
        </view>
        <view class="catalog">
            <scroll-view class="nav" :scroll-y="true">
                <view
                    :class="'item ' + (currentCategory.id == item.id ? 'active' : '')"
                    :data-id="item.id"
                    :data-index="index"
                    @tap="switchCate"
                    v-for="(item, index) in categoryList"
                    :key="item.id"
                >
                    {{ item.name }}
                </view>
            </scroll-view>
            <scroll-view class="cate" :scroll-y="true">
                <navigator url="url" class="banner">
                    <image class="image" :src="currentCategory.picUrl"></image>
                    <view class="txt">{{ currentCategory.frontName }}</view>
                </navigator>
                <view class="hd">
                    <text class="line"></text>
                    <text class="txt">{{ currentCategory.name }}分类</text>
                    <text class="line"></text>
                </view>
                <view class="bd">
                    <navigator
                        :url="'/pages/category/category?id=' + item.id"
                        :class="'item ' + ((index + 1) % 3 == 0 ? 'last' : '')"
                        v-for="(item, index) in currentSubCategoryList"
                        :key="item.id"
                    >
                        <image class="icon" :src="item.picUrl"></image>

                        <text class="txt">{{ item.name }}</text>
                    </navigator>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
var util = require('../../utils/util.js');

var api = require('../../config/api.js');

export default {
    data() {
        return {
            categoryList: [],
            currentCategory: {
                id: '',
                picUrl: '',
                frontName: '',
                name: ''
            },
            currentSubCategoryList: {},
            scrollLeft: 0,
            scrollTop: 0,
            goodsCount: 0,
            scrollHeight: 0
        };
    },
    onLoad: function (options) {
        this.getCatalog();
    },
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载

        this.getCatalog();
        uni.hideNavigationBarLoading(); //完成停止加载

        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getCatalog: function () {
            //CatalogList
            let that = this;
            uni.showLoading({
                title: '加载中...'
            });
            util.request(api.CatalogList).then(function (res) {
                that.setData({
                    categoryList: res.data.categoryList,
                    currentCategory: res.data.currentCategory,
                    currentSubCategoryList: res.data.currentSubCategory
                });
                uni.hideLoading();
            });
            util.request(api.GoodsCount).then(function (res) {
                that.setData({
                    goodsCount: res.data
                });
            });
        },

        getCurrentCategory: function (id) {
            let that = this;
            util.request(api.CatalogCurrent, {
                id: id
            }).then(function (res) {
                that.setData({
                    currentCategory: res.data.currentCategory,
                    currentSubCategoryList: res.data.currentSubCategory
                });
            });
        },

        switchCate: function (event) {
            var that = this;
            var currentTarget = event.currentTarget;

            if (this.currentCategory.id == event.currentTarget.dataset.id) {
                return false;
            }

            this.getCurrentCategory(event.currentTarget.dataset.id);
        }
    }
};
</script>
<style>
@import './catalog.css';
</style>
